<template>
	<view>
		<view class="ipt">
			<ipt />
		</view>
	<view class="tiao">
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" show-scrollbar="false" scroll-left="120">
							<view :class="{aa:idx==index}" class="scroll-view-item_H uni-bg-red" v-for="item,index in Readlist" :key="item.id" @click="dj(item.id)">{{item.name}}</view>	
						</scroll-view>
	</view>
	
	<view class="xra">
		<view class="big" v-for="item,index in xr" :key="item.id" >
				<view class="one">
					<p class="title">{{item.title}}</p>
					<p  class="text-ellipsis summary">{{item.summary}}</p>
					<p class="zi"><span class="ren">{{item.nickName}}</span><span class="sj">{{item.updateDate}}</span><span>{{item.thumhup}}</span></p>
				</view>
				<view class="two" v-if="item.imageUrl">
					<img :src="item.imageUrl" style="width:100%;margin-top: 10px; border-radius: 10px; height: 140rpx;" alt="">
				</view>
		</view>
	</view>
	
	</view>
</template>

<script>
	import {
		ref,
		reactive
	} from 'vue'
	import {getReadlist,getflTj,getflJk} from '../../unti/api.js'
	import ipt from '../../components/Search_ipt/Search_ipt.vue'
	export default {
		components: {
			ipt,
		},
		setup(props, context) {
			let xr=ref([])
			let idx=ref(0)
			let Readlist=ref([])
			let scrollTop = ref(0);
			let categoryId=ref(0)
			let old = reactive({
				scrollTop: 0
			})
			
		 scroll=function(e) {
							// console.log(e)
							old.scrollTop = e.detail.scrollTop
						}
			const Read=getReadlist().then(res=>{
				res.data.data.unshift({id:0,name:'推荐'})
				Readlist.value=res.data.data
			})
			const xrr=getflTj({size:10,current:1}).then((res)=>{
				// console.log(res.data.data.records);
				xr.value=res.data.data.records
			})
			
			const dj=(id)=>{
				console.log(id);
				idx.value=id
				categoryId.value=id
				getflJk({categoryId:categoryId.value,size:10,current:1}).then((res)=>{
					console.log(res)
					xr.value=res.data.data.records
				})
			}
			return {
				scrollTop,
				old,
				scroll,
				Readlist,
				dj,
				idx,
				categoryId,
				xrr,
				xr
			}
		}
	}
</script>

<style>
	.xra{
		padding: 0 10rpx;
	}
	.sj{
		margin: 0 30rpx;
	}
	.ren{
		color: black;
	}
	.zi{
		font-size: 16rpx;
		color: #ccc;
	}
	.summary{
		margin: 10px 0;
		height: 30px;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		/* white-space: normal; */
		color: #ccc;
		font-size: 16rpx;
	}
	.big{
		height: 230rpx;
		display: flex;
		border-bottom: 1px solid #ccc;
	}
	.one{
		flex: 1;
		margin: auto;
	}
	.two{
		width:35%;
		margin: auto;
		margin-left: 10px;
	}
	.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}

		.scroll-view-item_H {
			display: inline-block;
			margin: 0 10rpx;
			width: 70px;
			height: 90rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 36rpx;
			font-size: 15px;
		}
		
	
/* 	.scroll-view-item_H{
		display: inline-block;
	
			width: 100%;
	}
	.scroll-view_H{
		white-space: nowrap;
		height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
	
	} */
	.tiao {
		margin-top: 30px;
		border-bottom: 1px solid #ccc;
	}

	.ipt {
		background-color: rgb(51, 51, 239);
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 9999;
	}
	.aa{
		color: blue;
		border-bottom: 3px solid blue;
		border-radius: 2px ;
	}
	scroll-view ::-webkit-scrollbar {
	  display: none;
	  width: 0;
	  height: 0;
	  background-color: transparent;
	 }
</style>
